<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/gg.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <header>
        <div class="box mar clearFix">
            <div class="lf">
                <span class="span1">Free Call</span>
                <span class="span2">+1 234 456 78910</span>
            </div>
            <nav class="rg">
                <a href="">Facebook</a>
                <a href="">Twitter</a>
                <a href="">Dribbble</a>
            </nav>
        </div>
    </header>
    <div class="contbox">
        <div class="contbj">

            <div class="box cont mar clearFix position">
                <nav class="contnav clearFix">
                    <a class="lf h1a clearFix" href="">
                        <i class="iconfont icon-LOGO lf"></i>
                        <h1 class="rg">
                            <span>Directone </span>
                            <span>Directory and Listing</span>
                        </h1>
                    </a>
                    <ul class="lf">
                        <li><a class="color" href="">h o m e</a></li>
                        <li><a href="">a b o u t</a></li>
                        <li><a href="">L i s t i n g</a></li>
                        <li><a href="">B l o g</a></li>
                        <li><a href="">C o n t a c t</a></li>
                    </ul>
                    <button class="rg">
                        <span class="iconfont icon-jia"> Add Listing</span>
                    </button>
                </nav>
                <div class="contbt mar">
                    <h2>Let's Explore Your Awesome City</h2>
                    <p>Find great places to stay, eat, shop, or visit from local experts.</p>
                </div>
                <div class="continput clearFix mar">
                    <div class="lf position">
                        <i class="iconfont icon-sousuo"></i>
                        <input placeholder="What are you looking for?" type="text">
                    </div>
                    <div class="lf position">
                        <i class="iconfont icon-weizhi1"></i>
                        <input placeholder="Search Location" type="text">
                    </div>
                    <div class="lf xiala iconfont icon-xiala">All Categories
                        <section>
                            <option value="">All Categories</option>
                            <option value="">Food &amp; Drinks</option>
                            <option value="">Hotel</option>
                            <option value="">Shopping</option>
                            <option value="">Beauty</option>
                            <option value="">Fitness</option>
                            <option value="">Bar &amp; Club</option>
                            <option value="">Games</option>
                            <option value="">Places</option>
                            <option value="">Circus</option>
                            <option value="">Theater</option>
                            <option value="">Sports</option>
                            <option value="">Health</option>
                        </section>
                    </div><button class="position lf iconfont icon-sousuo"> Search</button>
                </div>
            </div>
        </div>
    </div>

    <div class="cdbox">
        <div class="cd mar box position clearFix">
            <ul class="clearFix position">
                <li class="lf hover position hover">
                    <div class="position">
                        <i class="iconfont icon-solid-home"></i>
                        <p>Food & Drink</p>
                        <span>103</span>
                        <span>Listings</span>
                    </div>
                </li>
                <li class="lf hover position hover">
                    <div class="position">
                        <i class="iconfont icon-dianpu"></i>
                        <p>Hotels</p>
                        <span>40</span>
                        <span>Listings</span>
                    </div>
                </li>
                <li class="lf hover position hover">
                    <div class="position">
                        <i class="iconfont icon-qiubingqilin"></i>
                        <p>Shopping</p>
                        <span>13</span>
                        <span>Listings</span>
                    </div>
                </li>
                <li class="lf hover position hover">
                    <div class="position">
                        <i class="iconfont icon-youxiji"></i>
                        <p>Beauty</p>
                        <span>303</span>
                        <span>Listings</span>
                    </div>
                </li>
                <li class="lf hover position hover">
                    <div class="position">
                        <i class="iconfont icon-icon-test"></i>
                        <p>Fitness</p>
                        <span>13</span>
                        <span>Listings</span>
                    </div>
                </li>
                <li class="lf hover position hover">
                    <div class="position">
                        <i class="iconfont icon-tiyuguan"></i>
                        <p>Bar & Club</p>
                        <span>43</span>
                        <span>Listings</span>
                    </div>
                </li>
                <li class="lf hover position hover">
                    <div class="position">
                        <i class="iconfont icon-zhuzhi_chengshi"></i>
                        <p>Games</p>
                        <span>53</span>
                        <span>Listings</span>
                    </div>
                </li>
                <li class="lf hover position hover">
                    <div class="position">
                        <i class="iconfont icon-yinshibaike"></i>
                        <p>Places</p>
                        <span>546</span>
                        <span>Listings</span>
                    </div>
                </li>
                <li class="lf hover position hover">
                    <div class="position">
                        <i class="iconfont icon-shucai"></i>
                        <p>Circus</p>
                        <span>34</span>
                        <span>Listings</span>
                    </div>
                </li>
                <li class="lf hover position hover">
                    <div class="position">
                        <i class="iconfont icon-clown"></i>
                        <p>Theater</p>
                        <span>435</span>
                        <span>Listings</span>
                    </div>
                </li>
                <li class="lf hover position hover">
                    <div class="position">
                        <i class="iconfont icon-work-copy"></i>
                        <p>Sports</p>
                        <span>32</span>
                        <span>Listings</span>
                    </div>
                </li>
                <li class="lf hover position hover">
                    <div class="position">
                        <i class="iconfont icon-weizhi"></i>
                        <p>Health</p>
                        <span>56</span>
                        <span>Listings</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <div class="jsbox">
        <div class="js mar clearFix box position">
            <p class="js1">OUR LISTING</p>
            <h2>Popular Listing</h2>
            <div class="jscont clearFix">
                <div class="lf jscontbox">
                    <div class="jsimg position">
                        <img src="./images/list-1.jpg" alt="">
                        <div class="ssan iconfont icon-sousuo"></div>
                        <span></span>
                        <i class="iconfont icon-qiubingqilin"></i>
                    </div>
                    <div class="jstextbox clearFix">
                        <p>FOOD & DRINKS</p>
                        <p>Japanese Restaurant</p>
                        <p><i class="iconfont icon-weizhi1"></i><span>Suite 721 New York NY 10016</span></p>
                        <p><i class="iconfont icon-dianhua"></i><span>+00 123 456 7890</span></p>
                        <div class="clearFix jsfoot">
                            <div class="lf">
                                <span>Review</span>
                                <span> 5.0/5</span>
                                <i class="iconfont icon-shiwujiaoxing"></i><span>(100)</span>
                            </div>
                            <div class="rg">
                                <i class="iconfont icon-xiai"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lf jscontbox">
                    <div class="jsimg position">
                        <img src="./images/list-2.jpg" alt="">
                        <div class="ssan iconfont icon-sousuo"></div>
                        <span></span>
                        <i class="iconfont icon-icon-test"></i>
                    </div>
                    <div class="jstextbox clearFix">
                        <p>Harbor Lights Hotel</p>
                        <p>Japanese Restaurant</p>
                        <p><i class="iconfont icon-weizhi1"></i><span>Suite 721 New York NY 10016</span></p>
                        <p><i class="iconfont icon-dianhua"></i><span>+00 123 456 7890</span></p>
                        <div class="clearFix jsfoot">
                            <div class="lf">
                                <span>HOTEL</span>
                                <span> 5.0/5</span>
                                <i class="iconfont icon-shiwujiaoxing"></i><span>(100)</span>
                            </div>
                            <div class="rg">
                                <i class="iconfont icon-xiai"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lf jscontbox">
                    <div class="jsimg position">
                        <img src="./images/list-3.jpg" alt="">
                        <div class="ssan iconfont icon-sousuo"></div>
                        <span></span>
                        
                        <i class="iconfont icon-youxiji"></i>
                    </div>
                    <div class="jstextbox clearFix">
                        <p>SHOPPING</p>
                        <p>MS Center Mall</p>
                        <p><i class="iconfont icon-weizhi1"></i><span>Suite 721 New York NY 10016</span></p>
                        <p><i class="iconfont icon-dianhua"></i><span>+00 123 456 7890</span></p>
                        <div class="clearFix jsfoot">
                            <div class="lf">
                                <span>Review</span>
                                <span> 5.0/5</span>
                                <i class="iconfont icon-shiwujiaoxing"></i><span>(100)</span>
                            </div>
                            <div class="rg">
                                <i class="iconfont icon-xiai"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lf jscontbox">
                    <div class="jsimg position">
                        <img src="./images/list-4.jpg" alt="">
                        <div class="ssan iconfont icon-sousuo"></div>
                        <span></span>
                        <i class="iconfont icon-tiyuguan"></i>
                    </div>
                    <div class="jstextbox clearFix">
                        <p>GYM FITNESS</p>
                        <p>Maxout Fitness Gym</p>
                        <p><i class="iconfont icon-weizhi1"></i><span>Suite 721 New York NY 10016</span></p>
                        <p><i class="iconfont icon-dianhua"></i><span>+00 123 456 7890</span></p>
                        <div class="clearFix jsfoot">
                            <div class="lf">
                                <span>Review</span>
                                <span> 5.0/5</span>
                                <i class="iconfont icon-shiwujiaoxing"></i><span>(100)</span>
                            </div>
                            <div class="rg">
                                <i class="iconfont icon-xiai"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="djlvbox clearFix">
        <div class="djlv clearFix box mar position">
            <div class="lf djlvlf">
                <img src="./images/intro.jpg" alt="">
            </div>
            <div class="lf djlvrg clearFix position">
                <p class="djlvrgtop">SPECIAL OFFERS</p>
                <div class="djlvrgcont clearFix">
                    <div class="lf">
                        <h2>We Have Special Offers Every Now and Then</h2>
                    </div>
                    <button class="lf">
                        Show Special Offers
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="jsbox">
        <div class="js mar clearFix box position">
            <p class="js1">LISTING</p>
            <h2>Our Listing</h2>
            <div class="jscont clearFix">
                <div class="lf jscontbox">
                    <div class="jsimg position">
                        <img src="./images/list-5.jpg" alt="">
                        <div class="ssan iconfont icon-sousuo"></div>
                        <span></span>
                        <i class="iconfont icon-qiubingqilin"></i>
                    </div>
                    <div class="jstextbox clearFix">
                        <p>FOOD & DRINKS</p>
                        <p>Japanese Restaurant</p>
                        <p><i class="iconfont icon-weizhi1"></i><span>Suite 721 New York NY 10016</span></p>
                        <p><i class="iconfont icon-dianhua"></i><span>+00 123 456 7890</span></p>
                        <div class="clearFix jsfoot">
                            <div class="lf">
                                <span>Review</span>
                                <span> 5.0/5</span>
                                <i class="iconfont icon-shiwujiaoxing"></i><span>(100)</span>
                            </div>
                            <div class="rg">
                                <i class="iconfont icon-xiai"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lf jscontbox">
                    <div class="jsimg position">
                        <img src="./images/list-6.jpg" alt="">
                        <div class="ssan iconfont icon-sousuo"></div>
                        <span></span>
                        <i class="iconfont icon-icon-test"></i>
                    </div>
                    <div class="jstextbox clearFix">
                        <p>Harbor Lights Hotel</p>
                        <p>Japanese Restaurant</p>
                        <p><i class="iconfont icon-weizhi1"></i><span>Suite 721 New York NY 10016</span></p>
                        <p><i class="iconfont icon-dianhua"></i><span>+00 123 456 7890</span></p>
                        <div class="clearFix jsfoot">
                            <div class="lf">
                                <span>HOTEL</span>
                                <span> 5.0/5</span>
                                <i class="iconfont icon-shiwujiaoxing"></i><span>(100)</span>
                            </div>
                            <div class="rg">
                                <i class="iconfont icon-xiai"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lf jscontbox">
                    <div class="jsimg position">
                        <img src="./images/list-7.jpg" alt="">
                        <div class="ssan iconfont icon-sousuo"></div>
                        <span></span>
                        
                        <i class="iconfont icon-youxiji"></i>
                    </div>
                    <div class="jstextbox clearFix">
                        <p>SHOPPING</p>
                        <p>MS Center Mall</p>
                        <p><i class="iconfont icon-weizhi1"></i><span>Suite 721 New York NY 10016</span></p>
                        <p><i class="iconfont icon-dianhua"></i><span>+00 123 456 7890</span></p>
                        <div class="clearFix jsfoot">
                            <div class="lf">
                                <span>Review</span>
                                <span> 5.0/5</span>
                                <i class="iconfont icon-shiwujiaoxing"></i><span>(100)</span>
                            </div>
                            <div class="rg">
                                <i class="iconfont icon-xiai"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lf jscontbox">
                    <div class="jsimg position">
                        <img src="./images/list-8.jpg" alt="">
                        <div class="ssan iconfont icon-sousuo"></div>
                        <span></span>
                        <i class="iconfont icon-tiyuguan"></i>
                    </div>
                    <div class="jstextbox clearFix">
                        <p>GYM FITNESS</p>
                        <p>Maxout Fitness Gym</p>
                        <p><i class="iconfont icon-weizhi1"></i><span>Suite 721 New York NY 10016</span></p>
                        <p><i class="iconfont icon-dianhua"></i><span>+00 123 456 7890</span></p>
                        <div class="clearFix jsfoot">
                            <div class="lf">
                                <span>Review</span>
                                <span> 5.0/5</span>
                                <i class="iconfont icon-shiwujiaoxing"></i><span>(100)</span>
                            </div>
                            <div class="rg">
                                <i class="iconfont icon-xiai"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lf jscontbox">
                    <div class="jsimg position">
                        <img src="./images/list-9.jpg" alt="">
                        <div class="ssan iconfont icon-sousuo"></div>
                        <span></span>
                        <i class="iconfont icon-icon-test"></i>
                    </div>
                    <div class="jstextbox clearFix">
                        <p>GYM FITNESS</p>
                        <p>Maxout Fitness Gym</p>
                        <p><i class="iconfont icon-weizhi1"></i><span>Suite 721 New York NY 10016</span></p>
                        <p><i class="iconfont icon-dianhua"></i><span>+00 123 456 7890</span></p>
                        <div class="clearFix jsfoot">
                            <div class="lf">
                                <span>Review</span>
                                <span> 5.0/5</span>
                                <i class="iconfont icon-shiwujiaoxing"></i><span>(100)</span>
                            </div>
                            <div class="rg">
                                <i class="iconfont icon-xiai"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lf jscontbox">
                    <div class="jsimg position">
                        <img src="./images/list-10.jpg" alt="">
                        <div class="ssan iconfont icon-sousuo"></div>
                        <span></span>
                        <i class="iconfont icon-zhuzhi_chengshi"></i>
                    </div>
                    <div class="jstextbox clearFix">
                        <p>GYM FITNESS</p>
                        <p>Maxout Fitness Gym</p>
                        <p><i class="iconfont icon-weizhi1"></i><span>Suite 721 New York NY 10016</span></p>
                        <p><i class="iconfont icon-dianhua"></i><span>+00 123 456 7890</span></p>
                        <div class="clearFix jsfoot">
                            <div class="lf">
                                <span>Review</span>
                                <span> 5.0/5</span>
                                <i class="iconfont icon-shiwujiaoxing"></i><span>(100)</span>
                            </div>
                            <div class="rg">
                                <i class="iconfont icon-xiai"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lf jscontbox">
                    <div class="jsimg position">
                        <img src="./images/list-11.jpg" alt="">
                        <div class="ssan iconfont icon-sousuo"></div>
                        <span></span>
                        <i class="iconfont icon-shucai"></i>
                    </div>
                    <div class="jstextbox clearFix">
                        <p>GYM FITNESS</p>
                        <p>Maxout Fitness Gym</p>
                        <p><i class="iconfont icon-weizhi1"></i><span>Suite 721 New York NY 10016</span></p>
                        <p><i class="iconfont icon-dianhua"></i><span>+00 123 456 7890</span></p>
                        <div class="clearFix jsfoot">
                            <div class="lf">
                                <span>Review</span>
                                <span> 5.0/5</span>
                                <i class="iconfont icon-shiwujiaoxing"></i><span>(100)</span>
                            </div>
                            <div class="rg">
                                <i class="iconfont icon-xiai"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lf jscontbox">
                    <div class="jsimg position">
                        <img src="./images/list-12.jpg" alt="">
                        <div class="ssan iconfont icon-sousuo"></div>
                        <span></span>
                        <i class="iconfont icon-clown"></i>
                    </div>
                    <div class="jstextbox clearFix">
                        <p>GYM FITNESS</p>
                        <p>Maxout Fitness Gym</p>
                        <p><i class="iconfont icon-weizhi1"></i><span>Suite 721 New York NY 10016</span></p>
                        <p><i class="iconfont icon-dianhua"></i><span>+00 123 456 7890</span></p>
                        <div class="clearFix jsfoot">
                            <div class="lf">
                                <span>Review</span>
                                <span> 5.0/5</span>
                                <i class="iconfont icon-shiwujiaoxing"></i><span>(100)</span>
                            </div>
                            <div class="rg">
                                <i class="iconfont icon-xiai"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="lyjsbox">
        <div class="lyjs clearFix box mar">
            <div class="lyjslf lf">
                <img src="./images/about.jpg" alt="">
            </div>
            <div class="lyjsrg lf">
                <p>WELCOME TO DIRECTONE</p>
                <p>Directone A Directory & Listing</p>
                <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
                <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
                <div class="clearFix lyjsrgcont">
                    <div class="lf">
                        <p>50</p>
                        <p>YEARS OF EXPERIENCED</p>
                    </div>
                    <div class="lf">
                        <p>210K+</p>
                        <p>TOTAL LISTING</p>
                    </div>
                    <div class="lf">
                        <p>450</p>
                        <p>COMPANY STAF</p>
                    </div>
                    <div class="lf">
                        <p>100</p>
                        <p>HAPPY PEOPLE</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="peoplebox">
        <div class="people clearFix mar box position">
            <div class="lunboanniu">
            </div>
            <p class="peopletop">TESTIMONIAL</p>
            <h2>Happy People</h2>
            <div class="lunbox position">
                <div class="clearFix peoplelun position">
                    <div class="lf peoplelunbox position">
                        <p class="peopletext">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
                        <div class="ren clearFix">
                            <div class="lf renimg">
                                <img src="./images/person_1.jpg" alt="">
                            </div>
                            <div class="lf renwen">
                                <p>Roger Scott</p>
                                <p>MARKETING MANAGER</p>
                            </div>
                        </div>
                        <span class="shuminghao iconfont icon-a-shuangyinhaozuo3x"></span>
                    </div>
                    <div class="lf peoplelunbox position">
                        <p class="peopletext">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
                        <div class="ren clearFix">
                            <div class="lf renimg">
                                <img src="./images/person_2.jpg" alt="">
                            </div>
                            <div class="lf renwen">
                                <p>Roger Scott</p>
                                <p>MARKETING MANAGER</p>
                            </div>
                        </div>
                        <span class="shuminghao iconfont icon-a-shuangyinhaozuo3x"></span>
                    </div>
                    <div class="lf peoplelunbox position">
                        <p class="peopletext">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
                        <div class="ren clearFix">
                            <div class="lf renimg">
                                <img src="./images/person_3.jpg" alt="">
                            </div>
                            <div class="lf renwen">
                                <p>Roger Scott</p>
                                <p>MARKETING MANAGER</p>
                            </div>
                        </div>
                        <span class="shuminghao iconfont icon-a-shuangyinhaozuo3x"></span>
                    </div>
                    <div class="lf peoplelunbox position">
                        <p class="peopletext">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
                        <div class="ren clearFix">
                            <div class="lf renimg">
                                <img src="./images/person_1.jpg" alt="">
                            </div>
                            <div class="lf renwen">
                                <p>Roger Scott</p>
                                <p>MARKETING MANAGER</p>
                            </div>
                        </div>
                        <span class="shuminghao iconfont icon-a-shuangyinhaozuo3x"></span>
                    </div>
                    <div class="lf peoplelunbox position">
                        <p class="peopletext">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
                        <div class="ren clearFix">
                            <div class="lf renimg">
                                <img src="./images/person_3.jpg" alt="">
                            </div>
                            <div class="lf renwen">
                                <p>Roger Scott</p>
                                <p>MARKETING MANAGER</p>
                            </div>
                        </div>
                        <span class="shuminghao iconfont icon-a-shuangyinhaozuo3x"></span>
                    </div>
                    <div class="lf peoplelunbox position">
                        <p class="peopletext">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
                        <div class="ren clearFix">
                            <div class="lf renimg">
                                <img src="./images/person_2.jpg" alt="">
                            </div>
                            <div class="lf renwen">
                                <p>Roger Scott</p>
                                <p>MARKETING MANAGER</p>
                            </div>
                        </div>
                        <span class="shuminghao iconfont icon-a-shuangyinhaozuo3x"></span>
                    </div>
                </div>
            </div>
            </div>
    </div>

    <div class="spbox">
        <div class="sp clearFix mar box">
            <p class="sptext">LET'S FIND OUT</p>
            <h2>How It Works</h2>
            <div class="spimg position">
                <i class="iconfont icon-bofang"></i>
            </div>
        </div>
    </div>

    <div class="spnavbox">
        <div class="spnav clearFix mar box">
            <div class="lf hover  position">
                <i class="iconfont icon-zhuzhi_chengshi"></i>
                <p>1. Choose A
                    Category</p>
                    <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
            </div>
            <div class="lf hover  position">
                <i class="iconfont icon-zhuzhi_chengshi"></i>
                <p>1. Choose A
                    Category</p>
                    <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
            </div>
            <div class="lf hover  position">
                <i class="iconfont icon-zhuzhi_chengshi"></i>
                <p>1. Choose A
                    Category</p>
                    <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
            </div>
            <div class="lf hover  position">
                <i class="iconfont icon-zhuzhi_chengshi"></i>
                <p>1. Choose A
                    Category</p>
                    <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
            </div>
        </div>
    </div>

    <div class="plbox">
        <div class="pl clearFix mar box">
            <p class="pltext">OUR BLOG</p>
            <h2>Recent Blog</h2>
            <div class="plcont clearFix">
                <div class="plcontbox lf">
                    <div class="plcontboximg position">
                        <div class="clearFix">
                            <img class="lf" src="./images/person_1.jpg" alt="">
                            <span class="lf">John Dorf</span>
                            <i class="rg iconfont icon-xiai"></i>
                        </div>
                    </div>
                    <p><span>DEC. 05, 2020</span> <span>3 Comments</span></p>
                    <p>Explore The Best Restaurant in New York</p>
                    <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
                </div>
                <div class="plcontbox lf">
                    <div class="plcontboximg position">
                        <div class="clearFix">
                            <img class="lf" src="./images/person_1.jpg" alt="">
                            <span class="lf">John Dorf</span>
                            <i class="rg iconfont icon-xiai"></i>
                        </div>
                    </div>
                    <p><span>DEC. 05, 2020</span> <span>3 Comments</span></p>
                    <p>Explore The Best Restaurant in New York</p>
                    <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
                </div>
                <div class="plcontbox lf">
                    <div class="plcontboximg position">
                        <div class="clearFix">
                            <img class="lf" src="./images/person_1.jpg" alt="">
                            <span class="lf">John Dorf</span>
                            <i class="rg iconfont icon-xiai"></i>
                        </div>
                    </div>
                    <p><span>DEC. 05, 2020</span> <span>3 Comments</span></p>
                    <p>Explore The Best Restaurant in New York</p>
                    <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
                </div>
                <div class="plcontbox lf">
                    <div class="plcontboximg position">
                        <div class="clearFix">
                            <img class="lf" src="./images/person_1.jpg" alt="">
                            <span class="lf">John Dorf</span>
                            <i class="rg iconfont icon-xiai"></i>
                        </div>
                    </div>
                    <p><span>DEC. 05, 2020</span> <span>3 Comments</span></p>
                    <p>Explore The Best Restaurant in New York</p>
                    <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
                </div>
            </div>
        </div>
    </div>

    <footer>
        <div class="foot clearFix mar box">
            <nav class="lf">
                <p>Directone </p>
                <p>Directory and Listing</p>
                <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
                <div class="clearFix">
                    <i class="iconfont icon-twitter"></i>
                    <i class="iconfont icon-xiangji"></i>
                    <i class="iconfont icon-facebookfacebook52"></i>
                </div>
            </nav>
            <ul class="lf">
                <h3>Explore</h3>
                <p class="iconfont icon-xiangyou">About Us</p>
                <p class="iconfont icon-xiangyou">Account</p>
                <p class="iconfont icon-xiangyou">Listing</p>
                <p class="iconfont icon-xiangyou">Pricing Packages</p>
                <p class="iconfont icon-xiangyou">Pricing Packages</p>
            </ul>
            <ul class="lf">
                <h3>Quick Links</h3>
                <p class="iconfont icon-xiangyou">Contact Us</p>
                <p class="iconfont icon-xiangyou">Terms & Conditions</p>
                <p class="iconfont icon-xiangyou">Privacy</p>
                <p class="iconfont icon-xiangyou">Feedbacks</p>
            </ul>
            <ul class="lf">
                <h3>Categories</h3>
                <p class="iconfont icon-xiangyou">Food & Drinks</p>
                <p class="iconfont icon-xiangyou">Hotels</p>
                <p class="iconfont icon-xiangyou">Shopping</p>
                <p class="iconfont icon-xiangyou">Beauty</p>
                <p class="iconfont icon-xiangyou">Fitness</p>
                <p class="iconfont icon-xiangyou">Bar & Club</p>
            </ul>
            <ul class="lf">
                <h3>Have a Questions?</h3>
                <p class="iconfont icon-work-copy">203 Fake St. Mountain View, San Francisco, California, USA</p>
                <p class="iconfont icon-dianhua">+2 392 3929 210</p>
                <p class="iconfont icon-emizhifeiji">info@yourdomain.com</p>
            </ul>
        </div>
    </footer>
    <div class="lastbox">
        <p><span>Copyright ©2022  All rights reserved | This template is made with <i class="iconfont icon-xiai"></i> by </span><span>17sucai.com</span></p>
    </div>

    <script src="./js/jquery-3.5.1.min.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>